<%--
  Created by IntelliJ IDEA.
  User: ddd
  Date: 2018/4/19
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增加盟商</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin.css">
</head>
<body>
<div style="padding: 15px;">
    <form id="fo" class="bs-example bs-example-form" role="form" method='post' enctype="multipart/form-data">
        <div class="input-group" id="choose1">
            <span class="input-group-addon">省份</span>
        </div>
        <br>
        <div class="input-group" id="choose2">
            <span class="input-group-addon">市县</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">加盟商：</span>
            <input type="text" name='name' class="form-control" placeholder="请输入加盟商名称">
        </div>
        <br>
        <input type="hidden" name="type" class="form-control" value="3">
        <input type="hidden" name="parent" class="form-control parentId">
        <br>
        <button class="btn btn-primary btn-lg btn-block validForm" type="button">提交保存</button>
    </form>
</div>


<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script>
    var data;
    $(function () {
        $.ajax({
            contentType:'application/json;charset=UTF-8',
            type: 'get',
            dataType: "json",
            url: '/area',
            success:function(result){
                data=result.data;
                $("#choose1").append('<select class="form-control province">');
                $(".province").append($("<option>"));
                $("#choose2").append('<select class="form-control city">');
                $(".city").append($("<option>"));
                var $selectprovince = $(".province option:selected").attr("class");
                $.each(result.data,function (k,v) {
                    if(v.type==1){
                        $(".province").append($("<option>").addClass(''+v.id+'').html(v.name));
                    }
                    if(v.type==2){
                        $(".city").append($("<option>").addClass(''+v.id+'').html(v.name))
                    }
                });
                $(".city").change(function(){
//                    console.log($(".province option:selected").attr("class"));
                    $(".parentId").attr('value',''+$(".city option:selected").attr("class")+'');
                });
                $(".province").change(function () {
                    $(".city").empty();
                    $(".city").append($("<option>"));
                    var select = $(".province option:selected").attr("class");
                    console.info(data);
                    $.each(data, function (k, v) {
                        if (v.parent == select) {
                            $(".city").append($("<option>").addClass('' + v.id + '').html(v.name));
                        }
                    });
                });

            }
        });


    })
    $(".validForm").click(function () {
        var name = $("input[name='name']").val();
        var type = 3;
        var parentid = $("input[name='parent']").val();
        var province = $(".province").val();
        var city = $(".city").val();
        var data;
        if (!province){
            layer.msg('请选择省份',{icon : 2,time:1000});
            $(".province").focus();
            return false;
        }
        if (!city){
            layer.msg('请选择市县',{icon : 2,time:1000});
            $(".city").focus();
            return false;
        }
        if (!name){
            layer.msg('请输入加盟商名称',{icon : 2,time:1000});
            $("input[name='name']").focus();
            return false;
        }
        data = {name:name,type:type,parent:parentid};
        $.ajax({
            type: 'POST',
            url: "/area",
            data: data,
            dataType: 'json',
            success: function (json) {
                console.info(json);
                if (json.status == "success") {
                    layer.msg('添加成功', {icon: 1, time: 1000});
                    setTimeout(function () {
                        parent.location.reload();
                    }, 1000);
                }
            },
            error: function () {
                layer.msg('服务器繁忙，请刷新页面后重试', {icon: 5, time: 1000});
            }
        });
    });

</script>
</body>
</html>
